<script>
import xComponent from "./x";
import yComponent from "./y";
import tooltipComponent from "./tooltip";
import titleComponent from "./title";
import legendComponent from "./legend";
export default {
  name: "BarTool",
  components: {
    xComponent,
    yComponent,
    tooltipComponent,
    titleComponent,
    legendComponent,
  },
  inject: ["father"],
  data() {
    return {
      activeName: "1",
      options: [
        {
          title: "x轴",
          name: "1",
          type: "xAxis",
          render: () => <xComponent />,
        },
        {
          title: "y轴",
          name: "2",
          type: "yAxis",
          render: () => <yComponent />,
        },
        {
          title: "提示框",
          name: "3",
          type: "tooltip",
          render: () => <tooltipComponent />,
        },
        {
          title: "图例",
          name: "4",
          type: "legend",
          render: () => <legendComponent />,
        },
        {
          title: "标题",
          name: "5",
          type: "title",
          render: () => <titleComponent />,
        },
      ],
    };
  },
  mounted() {},
  methods: {
    showHide(type) {
      this.father.echartsOptions[type].show =
        !this.father.echartsOptions[type].show;
    },
  },
  render() {
    return (
      <el-collapse v-model={this.activeName} accordion>
        {this.options.map((item) => {
          return (
            <el-collapse-item title={item.title} name={item.name}>
              <template slot="title">
                <i
                  class={[
                    "header-icon",
                    this.father.echartsOptions[item.type].show
                      ? "el-icon-open"
                      : "el-icon-turn-off",
                  ]}
                  onClick={($event) => {
                    this.showHide(item.type);
                    $event.stopPropagation();
                  }}
                ></i>
                <span> {item.title}</span>
              </template>
              {item.render()}
            </el-collapse-item>
          );
        })}
      </el-collapse>
    );
  },
};
</script>

<style scoped>
i {
  margin-right: 15px;
}
</style>